<template>
  <div class="paihang">
    <!--      头部-->
    <ul class="nav">
      <li>
        <router-link to="/index">喜马拉雅</router-link>
      </li>
      <li>
        <router-link to="/search">
          <p class="search" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
            搜索
          </p>
        </router-link>
      </li>
      <li><button>打开APP</button></li>
    </ul>
    <!--      导航栏-->
    <div class="navtab">
      <ul class="nav_tab">
<!--        <li v-for="(item,index) in navlist" v-on:click="change(index)" v-bind:class="{current:index==msg}">-->
<!--          <router-link to="/youshengshu">{{item.title}}</router-link>-->
<!--        </li>-->

        <li v-for="(item,index) in navlist" @click="changeborder(index)">
            <router-link :to="navlist[index].path"  :class="{current:index==num}">
              {{item.title}}
            </router-link>
        </li>
      </ul>
    </div>

    <router-view></router-view>
  </div>

</template>

<script>
    export default {
        // name: "paihang"
      data(){
        return{
          num:0,
          navlist:[
            {
              "title": "免费榜",
              "num": '0',
              "path": "/One_mianfei"
            },
            {
              "title": "飙升榜",
              "num": '1',
              "path": "/Two_hot_one"
            },
            {
              "title": "付费榜",
              "num": '2',
              "path": "/One_mianfei"
            },
            {
              "title": "订阅榜",
              "num": '3',
              "path": "/Two_hot_one"
            },
            {
              "title": "主播榜",
              "num": '4',
              "path": "/One_mianfei"
            },
            {
              "title": "好评榜",
              "num": '5',
              "path": "/Two_hot_one"
            }
          ]
        }
      },
      methods:{
        changeborder(a){
          this.num=a;
          console.log(this.num);
        }
      }
    }
</script>

<style scoped>
  /*内容*/
  .cont_tab{
    /*background: purple;*/
    padding: 0 20px;
  }
  .cont_tab>li{
    /*margin-top: 30px;*/
  }
  .cont_tab>li:nth-of-type(1){
    margin-top: 0;
  }
  /*li的内容*/
  .cont{
    display: flex;
    /*background-color: palevioletred;*/
    margin-bottom: 10px;
    /*margin-top: 20px;*/
  }
  .con_left{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #fa2800;*/
  }
  .con_left img{
    width: 100%;
    border-radius: 4px;
  }
  .con_right{
    /*border:1px solid blue;*/
    width: 66%;
    padding: 10px 0px 10px 10px
  }
  .con_right>h2{
    color: #333;
    font-size: 16px;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .con_right>span{
    font-size: 13px;
    color: #999;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .con_right>p{
    margin: 10px 0;
  }
  .con_right>p>span{
    font-size: 12px;
    color: #999;
  }
  .span_right{
    margin-left: 20px;
  }
  .paihang .navtab .nav_tab .current::before{
    bottom: -5px;
  }
</style>
